import {
  Layout,
  Menu,
  Button,
  Avatar,
  Space,
  Dropdown,
  Badge,
  Breadcrumb,
  Row,
  Col,
  message
} from 'antd'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UserOutlined,
  SearchOutlined,
  BellOutlined,
  DownOutlined,
  QuestionCircleOutlined,
  RobotOutlined,
  BulbOutlined
} from '@ant-design/icons'
import React, { useEffect, useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'
import { getStorage, getToken, setToken } from '../utils/tools'
import { adminMenuItems, sellerMenuItems, menuItems } from '../grants'
import head from '../assets/img/logo.png'

const { Header, Sider, Content } = Layout

export default function MyLayout({ children }) {
  const [collapsed, setCollapsed] = useState(false)
  const [themeColor, setThemeColor] = useState('#667eea')
  const [siteTitle, setSiteTitle] = useState('LBS智慧营销平台')
  const [breadcrumb, setBreadcrumb] = useState([])
  const navigate = useNavigate()
  // 获取路径
  const { pathname } = useLocation()
  // 导航
  // 判断角色是哪一种
  const role = getStorage('accountType')
  const menuItems = role === '0' ? adminMenuItems : sellerMenuItems

  // 获取面包屑导航
  const findDeepPath = (key) => {
    const result = []
    const findInfo = (arr) => {
      arr.forEach((item) => {
        const { children, ...info } = item
        result.push(info)
        if (children) {
          findInfo(children)
        }
      })
    }
    findInfo(menuItems)
    // 根据当前的key值过滤数据
    let tmpData = result.filter((item) => key.includes(item.key))

    tmpData = tmpData.map((item) => {
      return { title: item.label, href: item.key }
    })
    if (tmpData.length > 0) {
      return tmpData
    }
    return []
  }
  useEffect(() => {
    // 判断是否有token
    if (!getToken()) {
      message.error('请先登录')
      navigate('/')
    }
    if (typeof window !== 'undefined') {
      setBreadcrumb(findDeepPath(pathname))
    }
  }, [])
  return (
    <Layout style={{ height: '100vh' }} className="tech-layout">
      <Sider
        trigger={null}
        collapsible
        collapsed={collapsed}
        style={{ 
          background: 'linear-gradient(180deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%)',
          backdropFilter: 'blur(10px)',
          borderRight: '1px solid rgba(255, 255, 255, 0.2)',
          position: 'relative',
          overflow: 'hidden'
        }}
        className="mysider"
      >
        {/* AI智慧背景装饰 */}
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: `
            radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%)
          `,
          pointerEvents: 'none'
        }} />
        
        {/* 动态网格背景 */}
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundImage: `
            linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px)
          `,
          backgroundSize: '30px 30px',
          pointerEvents: 'none'
        }} />

        {/* 科技感扫描线 */}
        <div style={{
          position: 'absolute',
          top: '30%',
          left: 0,
          right: 0,
          height: '1px',
          background: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent)',
          animation: 'scan 4s ease-in-out infinite',
          pointerEvents: 'none'
        }} />

        {/* AI智慧装饰元素 */}
        <div style={{
          position: 'absolute',
          top: '15%',
          right: '10px',
          fontSize: '20px',
          color: 'rgba(255, 255, 255, 0.3)',
          animation: 'float 4s ease-in-out infinite',
          filter: 'drop-shadow(0 0 10px rgba(102, 126, 234, 0.5))'
        }}>
          <RobotOutlined />
        </div>
        
        <div style={{
          position: 'absolute',
          bottom: '20%',
          left: '10px',
          fontSize: '16px',
          color: 'rgba(255, 255, 255, 0.3)',
          animation: 'float 5s ease-in-out infinite reverse',
          filter: 'drop-shadow(0 0 10px rgba(118, 75, 162, 0.5))'
        }}>
          <BulbOutlined />
        </div>

        {/* 科技感圆环 */}
        <div style={{
          position: 'absolute',
          top: '40%',
          right: '15px',
          width: '40px',
          height: '40px',
          border: '1px solid rgba(255, 255, 255, 0.2)',
          borderRadius: '50%',
          animation: 'rotate 8s linear infinite',
          pointerEvents: 'none'
        }} />

        <div className="logo" style={{
          background: 'rgba(255, 255, 255, 0.15)',
          borderRadius: '15px',
          margin: '15px',
          padding: '15px',
          backdropFilter: 'blur(10px)',
          display: 'flex',
          alignItems: 'center',
          flexWrap: 'wrap',
          border: '1px solid rgba(255, 255, 255, 0.2)',
          boxShadow: '0 4px 15px rgba(0, 0, 0, 0.2)',
          position: 'relative',
          zIndex: 1
        }}>
          <img src={head} alt="logo" style={{ width: 30, height: 30 }} />
          <span style={{ 
            marginLeft: 10, 
            display: collapsed ? 'none' : 'block',
            color: '#fff',
            fontWeight: 'bold',
            fontSize: '12px',
            lineHeight: '1.2',
            wordBreak: 'break-word',
            maxWidth: collapsed ? 0 : 'calc(100% - 40px)',
            textShadow: '0 0 10px rgba(255, 255, 255, 0.5)'
          }}>
            LBS智慧营销平台
          </span>
        </div>
        <Menu
          mode="inline"
          style={{ 
            backgroundColor: 'transparent', 
            color: '#FFF',
            border: 'none',
            position: 'relative',
            zIndex: 1
          }}
          defaultSelectedKeys={['/admin']}
          onClick={({ key }) => {
            // console.log(key)
            setBreadcrumb(findDeepPath(key))
            navigate(key)
          }}
          items={menuItems}
        />
      </Sider>
      <Layout>
        <Header
          style={{
            padding: 0,
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            backdropFilter: 'blur(20px)',
            borderBottom: '1px solid rgba(255, 255, 255, 0.3)',
            boxShadow: '0 4px 20px rgba(0, 0, 0, 0.3), 0 0 20px rgba(102, 126, 234, 0.1)',
            display: 'flex',
            justifyContent: 'space-between',
            paddingRight: 24,
            alignItems: 'center'
          }}
        >
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => {
              setCollapsed(!collapsed)
            }}
            style={{
              fontSize: '16px',
              width: 64,
              height: 64,
              color: '#ffffff',
              textShadow: '1px 1px 2px rgba(0, 0, 0, 0.8)'
            }}
          />
          <div
            style={{
              display: 'flex',
              alignItems: 'center'
            }}
          >
            <Space size={'middle'} style={{ 
              fontSize: 16, 
              marginRight: 16, 
              color: '#ffffff',
              textShadow: '1px 1px 2px rgba(0, 0, 0, 0.8)'
            }}>
              <SearchOutlined style={{ 
                color: '#ffffff',
                textShadow: '1px 1px 2px rgba(0, 0, 0, 0.8)'
              }} />
              <Badge dot>
                <BellOutlined style={{ 
                  color: '#ffffff',
                  textShadow: '1px 1px 2px rgba(0, 0, 0, 0.8)'
                }} />
              </Badge>
              <QuestionCircleOutlined style={{ 
                color: '#ffffff',
                textShadow: '1px 1px 2px rgba(0, 0, 0, 0.8)'
              }} />
              <RobotOutlined style={{ 
                color: '#667eea',
                textShadow: '0 0 10px rgba(102, 126, 234, 0.8)'
              }} />
            </Space>
            <Dropdown
              menu={{
                items: [
                  {
                    label: (
                      <span
                        onClick={() => {
                          setToken('')
                          navigate('/')
                          message.success('退出成功')
                        }}
                      >
                        退出
                      </span>
                    ),
                    key: '0'
                  }
                ]
              }}
            >
              <a onClick={(e) => e.preventDefault()}>
                <Avatar
                  style={{ backgroundColor: '#667eea', marginRight: 10 }}
                  icon={<UserOutlined />}
                />
                <Space style={{ 
                  color: '#ffffff',
                  fontWeight: '600',
                  textShadow: '1px 1px 2px rgba(0, 0, 0, 0.8)'
                }}>
                  {/* 获取管理员名称 */}
                  {getStorage('nickname')}
                  <DownOutlined style={{ 
                    fontSize: 10, 
                    color: '#ffffff',
                    textShadow: '1px 1px 2px rgba(0, 0, 0, 0.8)'
                  }} />
                </Space>
              </a>
            </Dropdown>
          </div>
        </Header>
        <Content
          style={{
            overflow: 'auto',
            background: 'transparent'
          }}
        >
          <Row className="breadcrumb" style={{
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            backdropFilter: 'blur(20px)',
            borderBottom: '1px solid rgba(255, 255, 255, 0.3)',
            boxShadow: '0 4px 20px rgba(0, 0, 0, 0.3), 0 0 20px rgba(102, 126, 234, 0.1)'
          }}>
            <Col span={24}>
              <Breadcrumb 
                items={breadcrumb} 
                style={{ color: '#fff' }}
              />
            </Col>
          </Row>
          <div style={{ padding: '24px' }}>
            {children}
          </div>
        </Content>
      </Layout>
    </Layout>
  )
}
